<template>
  <BackButton @click="handleBackButton" />
  <div class="bg-#f6f6f6 h-100vh">
    <div class="loading" v-if="loading">
      <van-loading />
    </div>
    <yandex-map
      v-model="map"
      width="100%"
      height="300px"
      :settings="{
        location: {
          center: [lng, lat],
          zoom: 9
        }
      }"
    >
      <yandex-map-default-scheme-layer />
      <yandex-map-default-features-layer />
      <yandex-map-marker v-for="(marker, index) in markers" :key="index" :settings="marker">
        <template v-if="marker.type == 0">
          <div class="marker" />
        </template>
        <template v-if="marker.type == 1">
          <div>
            <img src="../../assets/images/pos.png" width="38px" height="46px" style="margin-top: -46px; margin-left: -13px" />
          </div>
        </template>

        <!-- <img src="../../assets/images/pos.png" width="38px" height="46px" v-if="marker.type == 2" /> -->
      </yandex-map-marker>
    </yandex-map>
    <div>
      <div class="box p-2rem" v-for="item in shops" :key="item.id">
        <div class="font-size-1.6rem">{{ item.name }}</div>
        <div class="font-size-1.2rem m-t-0.6rem m-b-1.4rem">{{ $t('shop.shop.distance') }}{{ item.distance }}</div>
        <div class="flex items-start">
          <img class="w-1.4rem h-1.4rem m-r-0.2rem" src="../../assets/images/address.png" />
          <div class="font-size-1.2rem">{{ item.address }}</div>
        </div>
        <div class="flex items-start m-t-1rem">
          <img class="w-1.4rem h-1.4rem m-r-0.2rem" src="../../assets/images/clock.png" />
          <div class="font-size-1.2rem">{{ item.openTime }}-{{ item.closeTime }}</div>
        </div>
        <div class="m-t-1rem">
          <van-button @click="choose(item)" color="#3AA1A2" type="primary" size="small">{{ $t('shop.shop.choose') }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BackButton } from 'vue-tg'
import { YandexMap, YandexMapDefaultFeaturesLayer, YandexMapDefaultSchemeLayer, YandexMapMarker } from 'vue-yandex-maps'

const loading = ref(true)

const lat = ref(55.755819)
const lng = ref(37.617644)

const map = shallowRef<any>(null)

const shops = ref<ApiShop[]>()

const markers = ref<any>([])

const located = ref(false)

const route = useRoute()
const back = route.query.back

onMounted(() => {
  if ('geolocation' in navigator) {
    navigator.geolocation.getCurrentPosition(function (position) {
      located.value = true
      lat.value = position.coords.latitude
      lng.value = position.coords.longitude
      markers.value.push({
        type: 0,
        coordinates: [lng.value, lat.value],
        zIndex: 100
      })
      initMap()
      initShop()
    })
  }

  setTimeout(() => failLocated(), 5000)
})

const failLocated = () => {
  if (!located.value) {
    showDialog({ message: 'Location error' })

    lat.value = 41.238769
    lng.value = 69.329226
    markers.value.push({
      type: 0,
      coordinates: [lng.value, lat.value],
      zIndex: 100
    })
    initMap()
    initShop()
  }
}

const initShop = async () => {
  shops.value = await apis.api.userShopShopAllWithDistance({ lat: lat.value, lng: lng.value })
  shops.value.forEach(s => {
    markers.value.push({
      type: 1,
      coordinates: [s.lng, s.lat],
      zIndex: 90
    })
  })
}

function initMap() {
  loading.value = false
}

const router = useRouter()

const choose = (item: ApiShop) => {
  apis.api.userAgentChoosePickUp({ pickUpId: item.id, pickUpName: item.nameRu }).then(() => router.back())
}

function handleBackButton() {
  if (back) {
    router.replace(back)
  } else {
    router.replace('/agentInfo')
  }
}
</script>
<style lang="scss" scoped>
.cates {
  width: 80px;
}
.product {
  flex: 1;
}
.loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10;
  background-color: #fff;
}
.box {
  border-radius: 1.2rem;
  background-color: #fff;
  margin: 1.5rem 1.25rem 0;
}

.marker {
  position: relative;
  width: 10px;
  height: 10px;
  background: rgb(58, 161, 162);
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
